<template>
    <el-card>
        <el-form
            ref="ruleFormRef"
            label-width="50"
            :rules="rules"
            :model="formSource"
        >
            <div class="form-contain">
                <div class="left">
                    <el-form-item>
                        <el-input />
                    </el-form-item>
                    <el-form-item>
                        <MdEditor theme="dark" v-model="text" />
                    </el-form-item>
                </div>
                <div class="right">
                    <el-form-item class="img" label-width="0">
                        <img
                            src="http://localhost:5173/pixiv/c/540x540_70/img-master/img/2023/10/19/00/00/16/112660887_p0_master1200.jpg"
                        />
                    </el-form-item>
                    <el-form-item label="分类">
                        <el-select
                            v-model="value"
                            placeholder="Select"
                            size="large"
                            style="width: 100%"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="标签">
                        <el-select
                            v-model="value1"
                            multiple
                            placeholder="Select"
                            size="large"
                            style="width: 100%"
                            multiple-limit="3"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="标签">
                        <div>
                            <el-radio-group>
                                <el-radio label="1" size="large" border
                                    >Option A</el-radio
                                >
                                <el-radio label="2" size="large" border
                                    >Option B</el-radio
                                >
                            </el-radio-group>
                        </div>
                    </el-form-item>
                    <el-form-item label="标签">
                        <div>
                            <el-radio-group>
                                <el-radio label="1" size="large" border
                                    >Option A</el-radio
                                >
                                <el-radio label="2" size="large" border
                                    >Option B</el-radio
                                >
                            </el-radio-group>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary">保存</el-button>
                        <el-button type="primary">存入草稿</el-button>
                        <!-- <el-button>Cancel</el-button> -->
                    </el-form-item>
                </div>
            </div>
        </el-form>
    </el-card>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue"
import { MdEditor } from "md-editor-v3"
import "md-editor-v3/lib/style.css"
import { type FormRules } from "element-plus"

const text = ref("hello Editor")
const value = ref("")

interface FormSourceType {
    title: string
    context: string
    main: string
}

const formSource = ref<FormSourceType>({
    title: "",
    context: "",
    main: "",
})

const rules = reactive<FormRules<FormSourceType>>({
    title: [{ required: true, message: "文章标题不能为空" }],
})

const value1 = ref([])
const options = [
    {
        value: "Option1",
        label: "Option1",
    },
    {
        value: "Option2",
        label: "Option2",
    },
    {
        value: "Option3",
        label: "Option3",
    },
    {
        value: "Option4",
        label: "Option4",
    },
    {
        value: "Option5",
        label: "Option5",
    },
]
</script>
<style lang="scss" scoped>
.form-contain {
    display: flex;
    gap: 20px;

    .left {
        flex: 1;
    }
    .right {
        width: 500px;
        padding-left: 10px;
        /* background-color: red; */
        padding-left: 10px;
        border-left: 1px solid #000;
        .img {
            img {
                height: 200px;
                width: 100%;
                object-fit: cover;
            }
        }
    }
}
</style>
<style lang="scss">
.md-editor-footer {
    height: 35px;
}
</style>
